<template>
  <div class="mainBook">
    <img src="@/assets/images/beCurrent.png" />
    <div class="rightContent">
      <schema-form ref="dynamicForm" v-bind="formProps" @submit="confirm" class="bookForm">
      </schema-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { SchemaForm, type SchemaFormProps } from '@/components/core/schema-form';
  import { schemas } from './form-schema';

  defineOptions({
    name: '',
  });
  const emit = defineEmits(['getDataUrl']);
  const dynamicForm = ref();
  const formProps: SchemaFormProps = { schemas, labelWidth: 38, showActionButtonGroup: false };
  // 点击提交
  function confirm(values) {
    dynamicForm.value?.validate().then(() => {
      emit('getDataUrl', dynamicForm.value.getFieldsValue());
    });
  }
  defineExpose({
    confirm,
  });
</script>

<style lang="less" scoped>
  .mainBook {
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;

    img {
      width: 100%;
    }
    .rightContent {
      padding: 24px 0 0;
      .title {
        font-size: 16px;
        color: #444444;
        border-left: 2px solid #0f53ac;
        padding-left: 8px;
        margin-bottom: 16px;
      }
    }
  }
</style>
